<template>
  <div class="login">
    <div class="header">
      <img src="../assets/images/logo-light.png" alt width="30px" /><span>河北省金融服务平台</span>
      <img :src="logo2" alt width="130px" />
    </div>
    <div class="infoBox">
      <div class="infoBoxBg">
        <div class="first-line">
          <div>
            <p>
              <img src="../assets/images/浏览 (1).png" width="15px" />
              <router-link tag="span" to="/" class="font-color cursor-point">首页</router-link>
            </p>
            <p>
              <img src="../assets/images/注册.png" width="13px" />
              <span>
                没有账号，去
                <router-link to="/register" class="font-color" >注册</router-link>
              </span>
            </p>
          </div>
          <div>
            <p>
              <img src="../assets/images/微信.png" width="15px" />
              <span>微信小程序</span>
            </p>
          </div>
        </div>
        <div class="login-info">
            <div class="title">
                <img src="../assets/images/登录设置.png" width="18px"/>
                <h3>企业登录</h3>
            </div>
            <div class="login-choose">
                <p class="choose">
                    <span :class="loginFlag==1?'active':''" @click="loginMethod(1)">密码登录</span>
                    <span :class="loginFlag==2?'active':''" @click="loginMethod(2)">短信验证登录</span>
                </p>
                <div class="passwordBox" v-show="loginFlag==1">
                  <Form ref="pwdLogin" :rules="rulePwdLogin" :model="pwdLoginInfo" >
                    <FormItem label="" prop="phone" style="margin-top:10px;">
                        <Input type="text" v-model="pwdLoginInfo.phone" number  placeholder="请输入手机号"/>
                    </FormItem>
                    <FormItem label="" prop="pwd" style="margin-top:-10px;">
                        <Input type="password" v-model="pwdLoginInfo.pwd"  placeholder="请输入密码"/>
                    </FormItem>
                    <FormItem  label="" prop="picCode" style="margin-top:-10px;">
                      <Row>
                        <i-col span="16">
                            <Input type="text" v-model="pwdLoginInfo.picCode" placeholder="请输入图形验证"/>
                        </i-col>
                        <i-col span="4" offset="1">
                            <img :src="picCodeImg" width="95px" height="30px"/>
                        </i-col>
                    </Row>
                    </FormItem>
                  </Form>
                </div>
                <div class="messageBox" v-show="loginFlag==2">
                  <Form ref="msgLogin" :rules="ruleMsgLogin" :model="msgLoginInfo" >
                    <FormItem label="" prop="phone" style="margin-top:10px;">
                        <Input type="text" v-model="msgLoginInfo.phone" number  placeholder="请输入手机号"/>
                    </FormItem>
                    <FormItem  label="" prop="msgCode" style="margin-top:-10px;">
                      <Row>
                        <i-col span="16">
                            <Input type="text" v-model="msgLoginInfo.msgCode" placeholder="请输入验证码"/>
                        </i-col>
                        <i-col span="4" offset="1">
                            <p class="sendCode cursor-point" @click="sendVerCode">发送验证码</p>
                        </i-col>
                    </Row>
                    </FormItem>
                  </Form>
                </div>
                <div class="term-info">
                    <Checkbox v-model="checked"></Checkbox>
                    我已阅读并同意 <router-link tag="a" to="/serviceAgreement">《服务协议》</router-link>及<router-link tag="a" to="/privacyStatement">《隐私声明》</router-link> 内容
                </div>
                <button class="loginBtn cursor-point" @click="loginHandler">登录</button>
                <div class="login-info-footer">
                    <p><img src="../assets/images/银行 (1).png" width="15px" alt/><span>金融机构</span></p>
                    <p><img src="../assets/images/各级政府 (1).png" width="15px" alt/><span>政府部门</span></p>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="contactus">
        <img :src="iphone" alt width="50px" />
        <span>0312-6098667</span>
      </div>
      <div class="address">
        <p>地址：河北省石家庄市长安区裕华东路113号</p>
        <p>
          证书编码：冀ICP备XXXXXXXX号-X
          <span>Copyright (C) 2020-2030 jr.esgcc.com.cn</span>
        </p>
      </div>
      <div class="organizer">
        <img src="../assets/images/u355.png" alt width="80px" />
        <div class="organize-info">
          <p>主办单位：河北省地方金融监督管理局（河北省金融工作办公室）</p>
          <p>承建单位：河北省惠信大数据科技服务有限公司</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import logo1 from "../assets/images/logo1.png";
import logo2 from "../assets/images/logo2.png";
import iphone from "../assets/images/联系我们.png";

export default {
  name: "login",
  components: {},
  data() {
    const pwsLoginPhone = (rule, value, callback) => { //手机号
        if (value === '') {
            callback(new Error('请输入手机号码'));
        } else if(!(/^1[3456789]\d{9}$/.test(value))) {
            callback(new Error('请输入正确的手机号码'));
        } else {
          callback();
        }
    };
    const pwsLoginPass = (rule, value, callback) => { //密码
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
          callback();
        }
    };
    const pwsLoginPicCode = (rule, value, callback) => { //图形验证码
        if (value === '') {
            callback(new Error('请输入图形验证码'));
        } else {
          callback();
        }
    };
    const pwsLoginMsgCode = (rule, value, callback) => { //图形验证码
        if (value === '') {
            callback(new Error('请输入短信验证码'));
        } else {
          callback();
        }
    };
    return {
      logo1,
      logo2,
      iphone,
      termsFlag: false,
      loginFlag: 1,
      picCodeImg: '',
      pwdLoginInfo:{
        phone:"",pwd:"",picCode:""
      },
      msgLoginInfo:{
        phone:"",msgCode:""
      },
      checked:false,
      rulePwdLogin:{
        phone: [{ validator: pwsLoginPhone, trigger: 'blur' }],
        pwd: [{ validator: pwsLoginPass, trigger: 'blur' }],
        picCode: [{ validator: pwsLoginPicCode, trigger: 'blur' }],
      },
      ruleMsgLogin:{
        phone: [{ validator: pwsLoginPhone, trigger: 'blur' }],
        msgCode: [{validator: pwsLoginMsgCode, trigger: 'blur'}]
      }
    };
  },
  mounted(){
    this.$axios('getPicCode',[],{}).then(res=>{
      this.picCodeImg = res.data.img;
    })
  },
  methods:{
    loginMethod(data) {
        this.loginFlag = data;
        if(data == 1){
          this.$axios('getPicCode',[],{}).then(res=>{
            this.picCodeImg = res.data.img;
          })
        }
    },
    sendVerCode(){
      this.$axios('getMessageCode',[],{phoneNo:this.msgLoginInfo.phone}).then(res=>{
        if(res.code == 200){
          //已发送短信验证码
        }else {
          this.$Message.error(res.msg);
        }
      })
    },
    loginHandler(){
      if(!this.checked){
        this.$Message.error("请阅读并同意《服务协议》及《隐私声明》");
        return;
      }
      if(this.loginFlag == 1){
        this.$refs["pwdLogin"].validate((valid) => {
          if (valid) {
            let pwdLoginParam = `?userPhone=${this.pwdLoginInfo.phone}&password=${this.pwdLoginInfo.pwd}&verCode=${this.pwdLoginInfo.picCode}`
            this.$axios('pwdLogin',pwdLoginParam,{}).then(res=>{
              if(res.code == 200){
                this.$token.setUUID(res.data.userPhone);
                this.$token.setRefreshToken(res.data.refresh_token);
                this.$token.setAccessToken(res.data.access_token);
                this.$router.push("/");
              }
            })
          } else {
              this.$Message.error('Fail!');
          }
        })
      }else {
        this.$refs["msgLogin"].validate((valid) => {
          if (valid) {
            let param = `?userPhone=${this.msgLoginInfo.phone}&smsCode=${this.msgLoginInfo.msgCode}`;
            this.$axios('msgLogin',param,{}).then(res=>{
              if(res.code == 200){
                this.$token.setUUID(res.data.userPhone);
                this.$token.setRefreshToken(res.data.refresh_token);
                this.$token.setAccessToken(res.data.access_token);
                this.$router.push("/");
              }
            })
          } else {
              this.$Message.error('Fail!');
          }
        })
      }
    }
  }
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("../assets/images/login-bg.png") 0 0;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header,
.infoBox,
.footer {
  min-width: 1240px;
  margin: 0 auto;
}
.header img {
  margin-left: 20px;
}
.header {
  height: 50px;
  margin-top: 10px;
}
.header span{
  margin-left: 10px;
  color: #fff;
  position: relative;
  top: -10px;
}
.footer {
  background: none;
  color: #fff;
  margin-bottom: 0;
  height: 70px;
  padding: 0;
}
.contactus,
.address,
.organizer {
  display: inline-block;
}
.contactus {
  font-size: 20px;
  margin-left: 20px;
}
.contactus span {
  position: relative;
  left: 10px;
  top: -20px;
  font-size: 18px;
  font-weight: 600;
}
.address {
  margin-left: 100px;
  font-size: 12px;
  color: #ffffff;
  position: relative;
  top: -10px;
}
.address span {
  margin-left: 8px;
}
.address img,
.organize-info {
  display: inline-block;
}
.organizer {
  margin-left: 120px;
}
.organize-info {
  margin-left: 10px;
  font-size: 12px;
  color: #ffffff;
  position: relative;
  top: -10px;
}
.infoBox {
  flex: 1;
  position: relative;
}
.infoBoxBg {
  width: 460px;
  height: 100%;
  position: absolute;
  top: 10px;
  right: 100px;
  background: url("../assets/images/矩形 144.png") no-repeat;
  background-size: 460px 100%;
  z-index: 10;
}
.first-line {
  padding: 15px 20px 10px 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.first-line p {
  display: inline-block;
  margin-left: 20px;
}
.first-line p .font-color {
  color: #00a573;
}
.first-line span {
  /* position: relative;
  top: -3px; */
  margin-left: 8px;
}
.login-info {
  position: relative;
  width: 420px;
  height: 83%;
  background: url("../assets/images/矩形 146.png") no-repeat;
  background-size: 420px 100%;
  left: 20px;
}
.login-info .title{
    display: flex;
    justify-content: center;
    padding: 30px 0 10px 0;
}
.login-info .title h3{
   margin-left: 10px;
}
.relative-10{
    position: relative;
    top:-10px;
}
.login-choose{
    padding: 20px 50px;
}
.choose span{
    line-height: 25px;
    display: inline-block;
    width: 50%;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid #CCCCCC;
}
.choose span.active{
    color: #00A573;
    border-bottom: 2px solid #00A573;
}
.ipt{
    height: 35px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(204, 204, 204, 1);
    padding: 10px;
}
.longipt{
    width: 100%;
    margin-top: 10px;
}
.p3rd,.p2nd{
    margin-top: 10px;
    margin-bottom: 10px;
}
.p3rd{
  display: flex;
  justify-content: space-between;
}
.p3rd img{
  display: block;
}
.p2nd {
    display: flex;
    justify-content: space-between;
}
.sendCode{
    width: 120px;
    height: 35px;
    background: #CCCCCC;
    display: inline-block;
    line-height: 35px;
    text-align: center;
}
.shortipt{
    width: 60%;
}
.loginBtn{
    margin-top: 10px;
    width:100%;
    height: 38px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 10px 0px rgba(102,102,102,0.2);
    border-radius:6px;
    color:rgba(0,165,115,1);
    border: none;
    font-weight: 600;
}
.passwordBox,.messageBox{
    height: 150px;
}
.login-info-footer{
    margin-top: 15px;
    display: flex;
    justify-content:space-around;
}
.login-info-footer span{
    font-size: 13px;
    margin-left: 10px;
}
.term-info{
    font-size: 12px;
}
</style>
